.first{
    background: url(../../assets/images/first_background.jpg) no-repeat center center;
    background-size: cover;
    padding: 0.2rem;
    .writeColor{
        background-color: white;
        box-sizing: border-box;
        height: calc( 100% - 0.4rem );
        width: calc( 100% - 0.4rem );
        padding-top: 0.35rem;
        overflow: hidden;
        animation: yidong 3s;
        animation-fill-mode: forwards;
        opacity: 0.2;
        transform: translateY(-100px);
        position: relative;
        .arrow{
            width: 0.38rem;
            height: 0.23rem;
            background: url(../../assets/images/biao.png) center center no-repeat;
            background-size: cover;
            position: absolute;
            left:42%;
            bottom: 3%;
            animation: topbottommove 2s infinite linear;
        }
        .first-title{
            height: 0.368rem;
            background: url(../../assets/images/first_title.jpg) center center no-repeat;
            background-size: auto 0.36rem;
            transform: translateY(-15px);
            opacity: 0;
            animation: titlemove 3s 1s;
            animation-fill-mode: forwards;
        }
        .centerimg{
            height: 3.74rem;
            width: 2.7rem;
            background: url(../../assets/images/first_background.jpg) center center no-repeat;
            background-size: cover;
            margin-top: 0.1rem;
            margin: 0.1rem calc( 100% - 3.17rem ) 0.2rem;
            padding: 0.07rem;
            box-sizing: border-box;
            animation: imgzhanshi 2.5s 1.5s;
            animation-fill-mode: forwards;
            opacity: 0;
            .border{
                width: 2.56rem;
                height: 3.6rem;
                background: url(../../assets/images/first_border.png) center center no-repeat;
                background-size: 0;
                position: relative;
                animation: extend 1s linear 2s;
                animation-fill-mode: forwards;
                .border-bottom{
                    width: 0.9rem;
                    height: 0.08rem;
                    background: url(../../assets/images/border_bottom.png) center center no-repeat;
                    position: absolute;
                    bottom: -0.05rem;
                    left: 0.78rem;
                    background-size: cover;
                }
            }
        }
        .name{
            height: 0.3466rem;
            font-size: 0.2rem;
            // display: flex;
            justify-content: space-around;
            position: relative;
            .julian{
                margin-top: calc( (0.3466rem - 0.16rem) / 2 );
                width: 0.18rem;
                height: 0.16rem;
                background: url(../../assets/images/julian.jpg) center center no-repeat;
                background-size: cover;
                position: absolute;
                left: 1.57rem;
                opacity: 0;
                animation: jiacnhujuan 2s 1s;
                animation-fill-mode: forwards;
            }
            .nan{
                // text-align: right;
                padding-right: 0.1rem;
                line-height: 0.3466rem;
                // flex: 4.3;
                word-break: break-word;
                color: rgb(17, 75, 17); 
                font-family: "楷体";
                white-space: pre-wrap;
                font-size: 0.3rem;
                position: absolute;
                left: 0.5rem;
                opacity: 0;
                animation: move 3s 1s;
                animation-fill-mode: forwards;
            }
            .nv{
                text-align: left;
                padding-left: 0.1rem;
                line-height: 0.3466rem;
                // flex: 5;
                word-break: break-word;
                color: rgb(17, 75, 17); 
                font-family: "楷体";
                font-size: 0.3rem;
                position: absolute;
                right: 0.5rem;
                opacity: 0;
                animation: move1 3s 1s;
                animation-fill-mode: forwards;
            }
            
        }
        .time{
            font-size: 0.2rem;
            word-break: break-word;
            color: rgb(17, 75, 17);
            text-align: center; 
            font-family: "楷体"; 
            white-space: pre-wrap; 
            letter-spacing: -0.01rem;
            padding-top: 0.05rem;
            padding-right: 0.2rem;
            font-weight: 200;
            animation: timezhanshi 1.5s 2.5s;
            animation-fill-mode: forwards;
            overflow: hidden;
            height: 0;
        }
        .addr{
            font-size: 0.2rem;
            word-break: break-word;
            color: rgb(17, 75, 17);
            text-align: center; 
            font-family: "楷体"; 
            white-space: pre-wrap; 
            letter-spacing: -0.01rem;
            padding-top: 0.05rem;
            padding:0 0.65rem 0 0.45rem;
            font-weight: 200;
            animation: addrzhanshi 1.5s 3.2s;
            animation-fill-mode: forwards;
            overflow: hidden;
            height: 0;
        }
    }
}
// 白色背景向下移动动画
@keyframes yidong {
    from{
        transform: translateY(-100px);
        opacity: 0.2;
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}

// 标题移动动画
@keyframes titlemove {
    from{
        transform: translateY(-15px);
        opacity: 0.1;
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}

// 图片渐出动画
@keyframes imgzhanshi {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

// 边框展开动画
@keyframes extend {
    from{
        background-size: 0 0;
    }
    to{
        background-size: 2.56rem 3.6rem;
    }
}


// 左侧名字移动动画
@keyframes move {
    0%{
        position: absolute;
        left: 0.5rem;
        opacity: 0;
    }
    100%{
        position: absolute;
        left: 0.9rem;
        opacity: 1;
    }
}

// 右侧名字移动动画
@keyframes move1 {
    0%{
        position: absolute;
        right: 0.5rem;
        opacity: 0;
    }
    100%{
        position: absolute;
        right: 0.9rem;
        opacity: 1;
    }
}

// 名字中间的卷渐出动画
@keyframes jiacnhujuan {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

// 名下时间
@keyframes timezhanshi {
    from{
        height: 0;
    }
    to{
        height: 0.3rem;
    }
}


// 名下地址
@keyframes addrzhanshi {
    from{
        height: 0;
    }
    to{
        height: 0.5rem;
    }
}

@keyframes topbottommove {
    0%{
        transform: translateY(0px);
    }
    50%{
        transform:translateY(20px);
    }
    100%{
        transform: translateY(0px);
    }
}